<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交APP - 功能拓展版</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.tailwindcss.com" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <h1 class="text-2xl font-bold text-blue-600">社交APP</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="loginBtn" class="text-gray-700 hover:text-blue-600">
                        <i class="fas fa-sign-in-alt mr-1"></i>登录
                    </button>
                    <button id="registerBtn" class="text-gray-700 hover:text-blue-600">
                        <i class="fas fa-user-plus mr-1"></i>注册
                    </button>
                    <button id="logoutBtn" class="hidden text-gray-700 hover:text-blue-600">
                        <i class="fas fa-sign-out-alt mr-1"></i>退出
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <!-- 用户信息显示 -->
        <div id="userInfo" class="hidden bg-white rounded-lg shadow p-4 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold">欢迎，<span id="usernameDisplay"></span></h3>
                    <p class="text-gray-600">ID: <span id="userIdDisplay"></span></p>
                </div>
                <div class="text-right">
                    <p class="text-sm text-gray-500">余额: ¥<span id="balanceDisplay">0.00</span></p>
                </div>
            </div>
        </div>

        <!-- 发布内容区域 -->
        <div id="postArea" class="hidden bg-white rounded-lg shadow p-6 mb-6">
            <h3 class="text-lg font-semibold mb-4">发布动态</h3>
            <textarea id="postContent" class="w-full p-3 border rounded-lg" rows="4" 
                      placeholder="分享你的想法..."></textarea>
            <div class="mt-4 flex justify-between items-center">
                <button id="publishBtn" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
                    <i class="fas fa-paper-plane mr-1"></i>发布
                </button>
                <button id="rechargeBtn" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
                    <i class="fas fa-wallet mr-1"></i>充值
                </button>
            </div>
        </div>

        <!-- 内容列表 -->
        <div id="contentList" class="space-y-4">
            <!-- 动态内容将在这里动态加载 -->
        </div>
    </div>

    <!-- 登录模态框 -->
    <div id="loginModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <h2 class="text-2xl font-bold mb-4">用户登录</h2>
            <form id="loginForm">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">用户名</label>
                    <input type="text" id="loginUsername" class="w-full p-2 border rounded-lg" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">密码</label>
                    <input type="password" id="loginPassword" class="w-full p-2 border rounded-lg" required>
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closeModal('loginModal')" 
                            class="px-4 py-2 text-gray-600 hover:text-gray-800">取消</button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                        登录
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <h2 class="text-2xl font-bold mb-4">用户注册</h2>
            <form id="registerForm">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">用户名</label>
                    <input type="text" id="registerUsername" class="w-full p-2 border rounded-lg" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">密码</label>
                    <input type="password" id="registerPassword" class="w-full p-2 border rounded-lg" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">确认密码</label>
                    <input type="password" id="confirmPassword" class="w-full p-2 border rounded-lg" required>
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closeModal('registerModal')" 
                            class="px-4 py-2 text-gray-600 hover:text-gray-800">取消</button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                        注册
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 充值模态框 -->
    <div id="rechargeModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <h2 class="text-2xl font-bold mb-4">账户充值</h2>
            <form id="rechargeForm">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">充值金额</label>
                    <select id="rechargeAmount" class="w-full p-2 border rounded-lg">
                        <option value="10">¥10.00</option>
                        <option value="50">¥50.00</option>
                        <option value="100">¥100.00</option>
                        <option value="200">¥200.00</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">支付方式</label>
                    <select id="paymentMethod" class="w-full p-2 border rounded-lg">
                        <option value="alipay">支付宝</option>
                        <option value="wechat">微信支付</option>
                    </select>
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closeModal('rechargeModal')" 
                            class="px-4 py-2 text-gray-600 hover:text-gray-800">取消</button>
                    <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                        确认支付
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.7/axios.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
